<p>{{ T.F.SYNC.SAFETY_BACKUP.DESCRIPTION | translate }}</p>

<div class="backup-actions">
  <button
    (click)="createManualBackup()"
    color="primary"
    mat-stroked-button
    type="button"
    [disabled]="isLoading()"
    [matTooltip]="T.F.SYNC.SAFETY_BACKUP.TOOLTIP_CREATE_MANUAL | translate"
  >
    <mat-icon>backup</mat-icon>
    {{ T.F.SYNC.SAFETY_BACKUP.BTN_CREATE_MANUAL | translate }}
  </button>

  <button
    (click)="loadBackups()"
    color="primary"
    mat-button
    type="button"
    [disabled]="isLoading()"
    [matTooltip]="T.F.SYNC.SAFETY_BACKUP.TOOLTIP_REFRESH | translate"
  >
    <mat-icon>refresh</mat-icon>
    {{ T.F.SYNC.SAFETY_BACKUP.BTN_REFRESH | translate }}
  </button>

  @if (backups().length > 0) {
    <button
      (click)="clearAllBackups()"
      color="warn"
      mat-button
      type="button"
      [disabled]="isLoading()"
      [matTooltip]="T.F.SYNC.SAFETY_BACKUP.TOOLTIP_CLEAR_ALL | translate"
    >
      <mat-icon>delete_sweep</mat-icon>
      {{ T.F.SYNC.SAFETY_BACKUP.BTN_CLEAR_ALL | translate }}
    </button>
  }
</div>

@if (isLoading()) {
  <div class="loading-indicator">
    <mat-icon>hourglass_empty</mat-icon>
    {{ T.F.SYNC.SAFETY_BACKUP.LOADING | translate }}
  </div>
}

@if (backups().length === 0 && !isLoading()) {
  <div class="no-backups">
    <mat-icon>info</mat-icon>
    {{ T.F.SYNC.SAFETY_BACKUP.NO_BACKUPS | translate }}
  </div>
}

@if (backups().length > 0 && !isLoading()) {
  <div class="backup-list">
    @for (backup of backups(); track backup.id; let i = $index) {
      <div class="backup-item">
        <div class="backup-item-header">
          <mat-icon class="backup-icon">{{ getReasonIcon(backup.reason) }}</mat-icon>
          <div class="backup-info">
            <div class="backup-title">
              {{ formatTimestamp(backup.timestamp) }}
            </div>
            <div class="backup-subtitle">
              {{ getSlotInfo(backup, i) }} • {{ getReasonText(backup.reason) }}
              @if (backup.lastChangedModelId) {
                • {{ T.F.SYNC.SAFETY_BACKUP.LAST_CHANGE_PREFIX | translate }}
                {{ backup.lastChangedModelId }}
              }
            </div>
          </div>
        </div>

        <div class="backup-actions-item">
          <button
            (click)="restoreBackup(backup)"
            color="primary"
            mat-button
            type="button"
            [disabled]="isLoading()"
            [matTooltip]="T.F.SYNC.SAFETY_BACKUP.TOOLTIP_RESTORE | translate"
          >
            <mat-icon>restore</mat-icon>
            {{ T.F.SYNC.SAFETY_BACKUP.BTN_RESTORE | translate }}
          </button>

          <button
            (click)="deleteBackup(backup)"
            color="warn"
            mat-button
            type="button"
            [disabled]="isLoading()"
            [matTooltip]="T.F.SYNC.SAFETY_BACKUP.TOOLTIP_DELETE | translate"
          >
            <mat-icon>delete</mat-icon>
            {{ T.F.SYNC.SAFETY_BACKUP.BTN_DELETE | translate }}
          </button>
        </div>
      </div>
    }
  </div>
}
